<template>
  <div class="distrCenter-container">
    <div class="row1">
      <div class="row1-img">
        <img
          :src="Userinfo.headImg"
          style="width: 40px; height: 40px; border-radius: 50%; display: block"
          alt=""
        />
      </div>
      <div class="row1-text" v-if="Userinfo?.nickName">
        {{ Userinfo.nickName }}
      </div>
    </div>
    <div class="row2">
      <div class="row2-left">
        <div class="row2-left-title">
          <span class="row2-left-title-txt">累计佣金</span
          ><span class="iconfont icon-jinrujiantou1 size"></span>
        </div>
        <div class="row2-left-price" v-if="commissionDetail?.accumulatedCommission>=0">
          {{ (commissionDetail?.accumulatedCommission / 100).toFixed(2) }}
        </div>
      </div>
      <div class="row2-right">
        <div class="row2-right-title">
          <span class="row2-right-title-txt">成功邀请</span
          ><span class="iconfont icon-jinrujiantou1 size"></span>
        </div>
        <div class="row2-right-price" v-if="commissionDetail?.inivateNum">
          {{ commissionDetail?.inivateNum }} 人
        </div>
      </div>
    </div>
    <div class="list-container">
      <div class="list-container-item" @click="skipFs">
        <div class="icon">
          <IconFont
            font-class-name="iconfont"
            class-prefix="icon"
            name="yonghuliebiao"
          />
        </div>
        <div class="item-text">粉丝列表</div>
      </div>
      <div class="list-container-item" @click="skipFsOrder">
        <div class="icon">
          <IconFont
            font-class-name="iconfont"
            class-prefix="icon"
            name="24gl-appsBig2"
          />
        </div>
        <div class="item-text">粉丝订单</div>
      </div>
      <div class="list-container-item" @click="skipTixian">
        <div class="icon">
          <IconFont
            font-class-name="iconfont"
            class-prefix="icon"
            name="tixian"
          />
        </div>
        <div class="item-text">提现中心</div>
      </div>
      <div class="list-container-item" @click="skipTixianHistory">
        <div class="icon">
          <IconFont
            font-class-name="iconfont"
            class-prefix="icon"
            name="zhanghutixianliebiao_icox"
          />
        </div>
        <div class="item-text">提现记录</div>
      </div>
    </div>
    <div class="module">
      <div class="module-item">
        <div></div>
      </div>
    </div>
    <div class="moneybox">
      <!-- <div class="row1">
        <div class="row1-left">可提现(元)</div>
        <div class="row1-right">
          <div>909.55</div>
        </div>
      </div> -->
      <!-- <div class="money">
        <div>909.55</div>
        <div></div>
      </div> -->
      <div class="moneyItem">
        <div class="item">
          <div class="item-title">可提现(元)</div>
          <div class="item-price">
            {{ (Userinfo?.balance / 100).toFixed(2) }}
          </div>
        </div>
        <div class="item">
          <div class="item-title">待提现(元)</div>
          <div class="item-price">
            {{ (Userinfo?.balance / 100).toFixed(2) }}
          </div>
        </div>
        <div class="item">
          <div class="item-title">提现中(元)</div>
          <div class="item-price" v-if="commissionDetail?.waitAmount">
            {{ commissionDetail.waitAmount / 100 }}
          </div>
        </div>
        <div class="item">
          <div class="item-title">已提现(元)</div>
          <div class="item-price" v-if="commissionDetail?.totalWithdrawAmount">
            {{ commissionDetail.totalWithdrawAmount / 100 }}
          </div>
        </div>
      </div>
      <div class="btn">
        <nut-button
          block
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          @click="skipTixian"
          >立即提现</nut-button
        >
      </div>
    </div>
    <div
      class="withdraw-container"
      :style="{ height: `${listContainerHeight}px` }"
    >
      <template v-if="listContainerHeight && listContainerHeight > 0">
        <scroll-view
          v-if="withList.length > 0 && listContainerHeight"
          :scroll-y="true"
          :style="{ height: `${listContainerHeight}px` }"
        >
          <div class="withdraw-item" v-for="item in withList" :key="item.id">
            <div>
              {{ item.money }}
            </div>
            <div>
              {{ item.time }}
            </div>
          </div>
        </scroll-view>
      </template>
    </div>
  </div>
</template>
<script setup>
import { IconFont } from "@nutui/icons-vue-taro";
import Taro, { useDidShow, usePullDownRefresh } from "@tarojs/taro";
import * as userApi from "../../api/user";
import * as withdrawApi from "../../api/withdraw";
import { ref, onMounted } from "vue";
import { useUserStore } from "../../store";
import { storeToRefs } from "pinia";
const userStore = useUserStore();
const { Userinfo } = storeToRefs(userStore);
const commissionDetail = ref({});

// 获取 useUserStore 对象
const withList = ref([
  {
    id: 1,
    money: "24",
    time: "2022-12-24 14:00:00",
  },
  {
    id: 2,
    money: "24",
    time: "2022-12-24 14:00:00",
  },
  {
    id: 3,
    money: "24",
    time: "2022-12-24 14:00:00",
  },
  {
    id: 4,
    money: "24",
    time: "2022-12-24 14:00:00",
  },
]);
onMounted(() => {
  Taro.showLoading({
    title: "加载中",
    mask: true,
  });
  userStore.getUserinfo();
  getWithData();
});
const getWithData = async () => {
  const res = await withdrawApi.withData({ userId: Userinfo.value.id });
  console.log(res);
  commissionDetail.value = res;
  Taro.hideLoading();
};

const listContainerHeight = ref(null);

const skipTixian = () => {
  Taro.navigateTo({
    url: "/pages/withdraw/index",
  });
};
const skipTixianHistory = () => {
  Taro.navigateTo({
    url: "/pages/withdraw-history/index",
  });
};
const skipFs = () => {
  Taro.navigateTo({
    url: "/pages/fan-list/index",
  });
};
const skipFsOrder = () => {
  Taro.navigateTo({
    url: "/pages/fans-order/index",
  });
};
useDidShow(() => {
  setTimeout(() => {
    getListContainerHeight();
  }, 600);
});
const getListContainerHeight = () => {
  const query = Taro.createSelectorQuery()
    .select(".withdraw-container")
    .boundingClientRect();
  query.selectViewport();
  query.exec(function (res) {
    if (res[0]) {
      listContainerHeight.value = res[0].height;
      console.log(res[0].height);
    }
  });
};
</script>
<style lang="scss">
.distrCenter-container {
  display: flex;
  flex-direction: column;
  padding: 25px;
  .row1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .row1-img {
      display: block;
    }
    .row1-text {
      margin-left: 20px;
      display: -webkit-box;
      /* autoprefixer: ignore next */
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #15181d;
      font-size: 30px;
    }
  }
  .row2 {
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 30px;
    margin-top: 20px;
    background-color: #fff;
    .row2-left {
      display: flex;
      flex-direction: column;
      .row2-left-title {
        display: flex;
        justify-content: center;
        align-items: center;
        .size {
          font-size: 30px;
        }
        .row2-left-title-txt {
          font-size: 24px;
          color: #858a99;
        }
      }
      .row2-left-price {
        margin-top: 10px;
        color: #15181d;
        font-weight: 700;
        font-size: 28px;
      }
    }
    .row2-right {
      display: flex;
      flex-direction: column;

      .row2-right-title {
        display: flex;
        justify-content: center;
        align-items: center;
        .size {
          font-size: 30px;
        }
        .row2-right-title-txt {
          font-size: 24px;
          color: #858a99;
        }
      }
      .row2-right-price {
        color: #15181d;
        margin-top: 10px;
        font-weight: 700;
        font-size: 28px;
      }
    }
  }
  .list-container {
    display: flex;
    justify-content: space-between;
    padding: 30px;
    background-color: #fff;
    box-sizing: border-box;
    margin-top: 20px;
    .list-container-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to right, #ff6034, #ee0a24);
        height: 50px;
        width: 50px;
        border-radius: 50px;
        // margin-right: 15px;
        .iconfont {
          font-size: 24px;
          color: #ffffff;
        }
      }
      .item-text {
        color: #15181d;
        font-size: 24px;
        margin-top: 15px;
      }
    }
  }
  .module {
  }
  .moneybox {
    // padding: 30px;
    padding: 30px 0;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 16px;
    box-sizing: border-box;

    .row1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30px;
      .row1-left {
        color: #858a99;
        font-size: 24px;
      }
      .row1-right {
        display: flex;
        color: #858a99;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        .size {
          font-size: 30px;
        }
      }
    }
    .money {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28px;
      margin-top: 25px;
      color: #15181d;
      font-weight: 700;
      padding: 0 30px;
      box-sizing: border-box;
    }
    .moneyItem {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 25px;
      padding: 0 30px;
      // .item:nth-child(n + 2) {
      //   margin-left: 120px;
      // }

      .item {
        // flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .item-title {
          color: #858a99;
          font-size: 24px;
        }
        .item-price {
          color: #15181d;
          font-size: 28px;
          font-weight: 700;
          margin-top: 15px;
        }
      }
    }
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 25px;
      padding: 0 30px;
      .nut-button--default {
        border: none;
      }
    }
  }
}
</style>
